{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<!-- <link rel="stylesheet" style="text/css" href="__PUBLIC__/Css/front/user_glb.css?version={$version}"> -->
<link rel="stylesheet" style="text/css" href="__PUBLIC__/Css/front/swiper.3.1.2.min.css?version={$version}">
<style type="text/css">
	body{
		padding-bottom:2.4rem;
		padding-top:2.2rem;
	}
    /*.swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
         text-align: center;
        font-size: 18px; 
        background: #fff;
        width: 82%;
         Center slide text vertically 
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }*/
    .service_nav .icon-img{
        display:inline-block;
        height: 2rem;
        width: 2rem;
        margin-bottom:0.25rem;
    }
    .service_list .jingxuan-jianjie{
	    overflow: hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp:1;
	    -webkit-box-orient: vertical;
	    display: -webkit-box
    }
    .apply-link{
    	font-size:0.7rem;
    	height:2.5rem;
    	line-height:2.5rem;
	    color: rgb(153, 153, 153);
    }


     /*轮播图*/
    .swiper-container{
        width: 100%;
    }
    .swiper-container .swiper-slide{
        width: 92%;
    }
    .swiper-container-horizontal>.swiper-pagination{
        bottom: 5px;
    }
    .swiper-pagination-bullet{
        width: .5rem;
        height: .5rem;
        background: #dcdcdc;
        border:0;
    }
    .swiper-pagination-bullet-active {
        opacity: 1;
        background: #2485e7;
    }
    /*标签*/
    .service_slide_bg .tag{
        font-size: .5rem;
        height: 0.6rem;
        line-height: 0.6rem;
        border-radius: .3rem;
        color: #fff;
        background: #2485e4;
        margin-right: 0.25rem;
        padding: 0 0.2rem;
    }
</style>
{/block}
{block name="content"}
<div class="service_header">
    <div class="location">
        <i class="icon icon_location3x"></i>
        <span>{$city}</span>
    </div>
    <p>服务</p>
    <a href="/FrontIndex/search" class="icon icon_search3x"></a>
</div>


<!-- 轮播图 -->
<div class="swiper-container circle_banner" style="margin-bottom: .5rem;">
    <div class="swiper-wrapper"> 
        {foreach from=$cust_flash_list item=v}
        <div class="swiper-slide">
            <a href="{$v.link}"><img src="{$v.pic}" alt="" ></a>
        </div>
        {/foreach}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<!-- 菜单 -->
<div class="service_nav" style="margin-bottom: .5rem;">
    <div class="service_nav_box clearfix">
        {foreach from = $service_type_list item = type}
		<a href="{$type.link}">
            <img src="{$type.icon}" class="icon-img"/>
            <p>{$type.service_type_name}</p>
        </a>
        {/foreach}
<!--         <a href="/FrontSite/get_site_list">
            <img src="/Public/Images/front/front_img/xmsb@3x.png" class="icon-img"/>
            <p>场地</p>
        </a>
        <a href="/FrontService/get_mentor_list">
            <img src="/Public/Images/front/front_img/shouye_zixun_pic3x.png" class="icon-img"/>
            <p>创业导师</p>
        </a>
        <a href="/FrontService/get_providers_list">
            <img src="/Public/Images/front/front_img/shouye_zixun_pic3x.png" class="icon-img"/>
            <p>法律</p>
        </a>
        <a href="">
            <img src="/Public/Images/front/front_img/shouye_zixun_pic3x.png" class="icon-img"/>
            <p>财税</p>
        </a>
        <a href="">
            <img src="/Public/Images/front/front_img/shouye_zixun_pic3x.png" class="icon-img"/>
            <p>营销推广</p>
        </a>
        <a href="">
            <img src="/Public/Images/front/front_img/shouye_zixun_pic3x.png" class="icon-img"/>
            <p>人力资源</p>
        </a> -->
        <a href="/FrontService/service_more">
            <!-- <i class="icon icon_more3x"></i> -->
            <img src="/Public/Images/front/front_img/more.png" alt="" class="icon-img">
            <p>更多</p>
        </a>
    </div>
    <!-- <div class="x-line"></div> -->
</div>
{if $service_mentor_list}
<div class="more_block">
    <div class="clearfix block_title">
        <a href="/FrontIncubator/park_list" class="clearfix more_a">
            <h6 class="fl">推荐导师 /</h6>
            <p class="fl">&nbsp;Mentor</p>
            <!-- <i class="img fr icon_enter_default3x"></i> -->
        </a>
    </div>
    <div class="slide_img service_slide_img">
        <div class="swiper-container swiper-3d" style="height: 100%;">
            <div class="swiper-wrapper">
                {foreach from =$service_mentor_list item =mentor}
                <div class="swiper-slide">
                    <a style="display: block; width: 100%;height: 100%;" href="/FrontService/mentor_detail/service_providers_id/{$mentor.service_providers_id}">
                    <img src="{$mentor.poster}" alt="" />
                    <div class="service_slide_bg">
                        <p class="txt_limit" style="margin:6rem 0 .35rem 4%;font-size:0.85rem;">{$mentor.user_name}&nbsp;&nbsp;<span class="tag">创业</span><span class="tag">投资</span><!-- {$mentor.domain_name} --></p>
                        <p class="teacher-jianjie">{strip_tags($mentor.service_providers_describe)}</p>
                    </div>
                    </a>
                </div>
                {/foreach}
            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div> -->
        </div>
    </div>
</div>
{/if}
{if $service_providers_list}
<div class="more_block">
    <div class="clearfix block_title">
        <!-- <h6 class="fl">精选服务商</h6>
        <i class="icon fr icon_enter_default3x" style="margin:0.8rem 0.2rem 0 0.4rem"></i>
        <a href="" class="apply-link fr">申请服务商</a> -->

        <a href="javascript:;" class="clearfix more_a">
            <h6 class="fl">精选服务商 /</h6>
            <p class="fl">&nbsp;Facilitator</p>
            <!-- <i class="img fr icon_enter_default3x"></i> -->
        </a>
    </div>
    <ul href="" class="service_list">
        {foreach from = $service_providers_list item = providers}
        <li>
            <a href="/FrontService/providers_detail/service_providers_id/{$providers.service_providers_id}">
                <div class="service_bg_box">
                    <img src="{$providers.poster}" alt="" />
                    <div class="clearfix service_bg">
                        <p class="classify">{$providers.service_type_name}</p>
                        <h4 class="company txt_limit">{$providers.service_providers_name}</h4>
                        <div class="line"></div>
                        <p class="desc txt_limit">{$providers.service_describe}</p>
                        <!-- <dl class="clearfix">
                            <dt class="txt_limit">{$providers.service_providers_name}</dt>
                            <dd class="">{$providers.service_type_name}</dd>
                            <dd class="">大数据应用</dd>
                        </dl> -->
                    </div>
                </div>
                <!-- <p class="jingxuan-jianjie">{$providers.service_describe}</p> -->
            </a>
        </li>
        {/foreach}
    </ul>
</div>
{/if}
{include file ="../footer.html"}
{/block}
{block name="js"}
{literal}
<!-- <script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script> -->
<script type="text/javascript" src="__PUBLIC__/Js/front/swiper.3.1.2.jquery.min.js"></script>
<script type="text/javascript">
    var swiper = new Swiper('.circle_banner', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
   

   var swiper = new Swiper('.swiper-3d', {
        loop : true,  
        // pagination: '.swiper-pagination',  
        effect: 'coverflow',  
        grabCursor: true,  
        centeredSlides: true,  
        // nextButton: '.swiper-button-next',  
        // prevButton: '.swiper-button-prev',  
        slidesPerView: 'auto',  
        coverflow: {  
            rotate: 0,// 旋转的角度  
            stretch: 10,// 拉伸   图片间左右的间距和密集度  
            depth: 100,// 深度   切换图片间上下的间距和密集度  
            modifier: 3,// 修正值 该值越大前面的效果越明显  
            slideShadows : false// 页面阴影效果  
        }
    });
//  $(document).scroll(function(){
//  	var scrollT = $(document).scrollTop();
//  	var headHei = $(".service_header").height();
//  	if(scrollT>=headHei){
//  		$(".service_header").css({
//  			"opacity":0.8,
//  			"transition":1000
//  		});
//  	}else{
//  		$(".service_header").css({
//  			"opacity":1,
//  			"transition":1000
//  		});
//  	}
//  });
    
    $('.location').on('click', function() {
        console.log('1');
        if(!is_wechat()){
            native_listen('location');
        }
        
    });
</script>
{/literal}
{/block}
